<!DOCTYPE html>
<html style="font-size: 20px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/static/dashboard/css/normalize.css">
    <link rel="stylesheet" href="/static/dashboard/css/vue-quill.snow.prod.css">
    <link rel="stylesheet" href="/static/dashboard/css/style.css">
    <link rel="stylesheet" href="/static/dashboard/css/viewer.min.css">
    <link rel="stylesheet" href="/static/dashboard/css/arco.min.css">
    <link rel="stylesheet" href="/static/dashboard/css/iconfont.css">
    <link rel="stylesheet" href="/static/dashboard/css/pc-plugin.css">
    <link rel="stylesheet" href="/static/dashboard/css/common.css">
    <link rel="stylesheet" href="/static/dashboard/css/index.css">
    <script src="/static/dashboard/js/tool.js"></script>
    <script src="/static/dashboard/js/axios.min.js"></script>
    <script src="/static/dashboard/js/vue.global.js"></script>
    <script src="/static/dashboard/js/arco-vue.min.js"></script>
    <script src="/static/dashboard/js/arco-vue-icon.min.js"></script>
    <script src="/static/dashboard/js/qrcode.vue.browser.min.js"></script>
    <script src="/static/dashboard/js/sortable.min.js"></script>
    <script src="/static/dashboard/js/vuedraggable.umd.min.js"></script>
    <script src="/static/dashboard/js/viewer.min.js"></script>
    <script src="/static/dashboard/js/v-viewer-vue3.js"></script>
    <script src="/static/dashboard/js/vue-json-excel.umd.js"></script>
    <script src="/static/dashboard/js/vue-quill.global.prod.js"></script>
    <script src="/static/dashboard/js/index.js"></script>
    <script src="/static/dashboard/js/howler.min.js"></script>
    <script src="/static/dashboard/js/echarts.js"></script>
    <script src="/static/dashboard/js/vue-echarts.js"></script>
    <script src="/static/dashboard/js/http.js"></script>
    <script src="/static/dashboard/js/pc-plugin.js"></script>
    <script src="/static/dashboard/js/common.js"></script>
    <script src="/static/dashboard/js/vue-seamless-scroll.js"></script>
    <script src="/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/dashboard/js/echarts.min.js"></script>
    <title>作战大屏</title>
    <style>
        @keyframes autoScroll {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%);
            }
        }
    </style>
    <script>
        var {Message, Modal} = ArcoVue;
        var vue = Vue;
        var {createApp, ref, onMounted, onBeforeUpdate, onUpdated} = Vue;

        (function (win, doc) {
            function setRootFontSize() {
                let docWidth = doc.documentElement.getBoundingClientRect().width;
                docWidth < 900 ? (docWidth = 900) : docWidth;
                doc.documentElement.style.fontSize = (docWidth / 1920) * 20 + "px";
            }
            setRootFontSize();
            win.addEventListener("resize", setRootFontSize, false);
        })(window, document);
    </script>
</head>
<body>
<div id="app" data-v-app="">
    <div class="container">
        <!-- <img class="body-bg" src="/static/dashboard/image/board-bg2.png"> -->
        <div class="body-tit">
            <div class="title-in">作战大屏</div>
            <img class="title-bg" src="/static/dashboard/image/board-top-tit-bg.png">
        </div>
        <div class="main">
            <img class="main-bg" src="/static/dashboard/image/board-main-bg.png">
            <div class="main-left">
                <div class="title">
                    <div class="default-break2">{{data.activity_title}}</div>
                </div>
                <div class="timer">
                    <div class="txt">倒计时:</div>
                    <div class="btn">{{count_down_day}}</div>
                    <div class="txt">天</div>
                    <div class="btn">{{count_down_hour}}</div>
                    <div class="txt">时</div>
                    <div class="btn">{{count_down_minute}}</div>
                    <div class="txt">分</div>
                    <div class="btn">{{count_down_second}}</div>
                    <div class="txt">秒</div>
                </div>
                <div class="plate">
                    <img src="/static/dashboard/image/board-icon-logo.png" class="plate-icon">
                    <div class="plate-btn"></div>
                    <img src="/static/dashboard/image/board-bg-plate.png" class="plate-bg">
                    <div class="plate-in">
                        <div class="line p1"> 曝光次数<span style="padding-left: 10px;">{{data.total_visitor_num}}次</span></div>
                        <div class="line p2"> 获客总数<span style="padding-left: 10px;">{{data.total_join_num}}人</span></div>
                        <div class="line p3"> 翻牌礼品<span style="padding-left: 10px;">{{data.total_activity_prize}}个</span></div>
                        <div class="line p4"> 盲盒礼品<span style="padding-left: 10px;">{{data.total_box_prize}}个</span></div>
                        <div class="line p5"> 成交客户<span style="padding-left: 10px;">{{data.payment_user_num}}人</span></div>
                        <div class="line p6"> 报名人数<span style="padding-left: 10px;">{{data.participate_num}}人</span></div>
                        <div class="line p7"> 成交订单<span style="padding-left: 10px;">{{data.payment_money_num}}个</span></div>
                        <div class="line p8"> 奖励金额<span style="padding-left: 10px;">{{data.total_disburse}}元</span></div>
                    </div>
                </div>
                <div class="line-chart" id="container">

                </div>
            </div>
            <div class="main-middle">
                <div class="title">
                    <div class="label">成交</div>
                    <div class="btns">
                        <div class="btn animate-big">
                            <div class="btn-border"></div>
                            {{data.transaction_amount}}
                        </div>
                    </div>
                    <div class="label" style="margin-left: 20px;">元</div>
                </div>
                <div class="sub-title">最近报名</div>
                <div class="table">
                    <div class="table-th">
                        <div class="table-td" style="width: 60px;">头像</div>
                        <div class="table-td" style="width: 60px;">昵称</div>
                        <div class="table-td" style="width: 100px;">姓名</div>
                        <div class="table-td" style="width: 100px;">手机号</div>
                        <div class="table-td" style="width: 80px;">时间</div>
                        <div class="table-td" style="width: 80px;">邀请人</div>
                    </div>
                </div>
                <div class="table-wrap0">
                    <div :style="{animation: (payment_order.length <= 5) ? 'none' : 'autoScroll ' + ((payment_order.length / 10) * 30) +'s linear infinite'}">
                        <div class="table">
                            <div class="table-tr" style="font-size: 0.7rem;" v-for="item in payment_order">
                                <div class="table-td" style="width: 60px;">
                                    <div class="head-img"><img :src="item.avatar_url" class="img-in"></div>
                                </div>
                                <div class="table-td" style="width: 60px;">{{item.nickname}}</div>
                                <div class="table-td" style="width: 100px;">{{item.name}}</div>
                                <div class="table-td" style="width: 100px;">{{item.phone}}</div>
                                <div class="table-td" style="width: 80px;">{{item.create_time}}</div>
                                <div class="table-td" style="width: 80px;">{{item.recom_nickname}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sub-title">
                    <!--<div class="more-btn1">查看更多</div>-->
                    <div>正在报名({{data.participate_ongoing_num}}人)</div>
                </div>
                <div class="table">
                    <div class="table-th">
                        <div class="table-td" style="width: 60px;">头像</div>
                        <div class="table-td" style="width: 60px;">昵称</div>
                        <div class="table-td" style="width: 100px;">姓名</div>
                        <div class="table-td" style="width: 100px;">手机号</div>
                        <div class="table-td" style="width: 80px;">邀请人</div>
                        <div class="table-td" style="width: 80px;">溯源</div>
                    </div>
                </div>
                <div class="table-wrap0">
                    <div :style="{animation: (participate_order.length <= 5) ? 'none' : 'autoScroll ' + ((participate_order.length / 10) * 30) +'s linear infinite'}">
                        <div class="table">
                            <div class="table-tr" style="font-size: 0.7rem;" v-for="item in participate_order">
                                <div class="table-td" style="width: 60px;">
                                    <div class="head-img"><img :src="item.avatar_url" class="img-in"></div>
                                </div>
                                <div class="table-td" style="width: 60px;">{{item.nickname}}</div>
                                <div class="table-td" style="width: 100px;">{{item.name}}</div>
                                <div class="table-td" style="width: 100px;">{{item.phone}}</div>
                                <div class="table-td" style="width: 80px;">{{item.recom_nickname}}</div>
                                <div class="table-td" style="width: 80px;">{{item.clerk_nickname}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="sub-title">员工拓客排行榜</div>
                <div class="table">
                    <div class="table-th">
                        <div class="table-td" style="width: 50px;">排名</div>
                        <div class="table-td" style="width: 60px;">头像</div>
                        <div class="table-td" style="width: 140px;">姓名</div>
                        <div class="table-td" style="width: 80px;">推荐数</div>
                        <div class="table-td" style="width: 60px;">成交数</div>
                    </div>
                </div>
                <div class="table-wrap">
                    <div :style="{animation: (staff_rankings.length <= 5) ? 'none' : 'autoScroll ' + ((staff_rankings.length / 10) * 30) +'s linear infinite'}">
                        <div class="table">
                            <div class="table-tr" v-for="(item, index) in staff_rankings">
                                <div class="table-td" style="width: 50px;">
                                    <img v-if="(index + 1) <= 3" :src="'/static/dashboard/image/board-icon-ranking-' + (index + 1) + '.png'" class="ranking-icon">
                                    <span v-else>{{ index + 1 }}</span>
                                </div>
                                <div class="table-td" style="width: 60px;">
                                    <div class="head-img"><img :src="item.avatar_url" class="img-in"></div>
                                </div>
                                <div class="table-td" style="width: 140px;">{{item.nickname}}</div>
                                <div class="table-td" style="width: 80px;">{{item.total_recomm}}</div>
                                <div class="table-td" style="width: 60px;">{{item.total_orders}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
                <div class="sub-title">盲盒抽奖</div>
                <div class="table">
                    <div class="table-th">
                        <div class="table-td" style="width: 60px;">头像</div>
                        <div class="table-td" style="width: 60px;">昵称</div>
                        <div class="table-td" style="width: 80px;">姓名</div>
                        <div class="table-td" style="width: 80px;">电话</div>
                        <div class="table-td" style="width: 150px;">奖品</div>
                    </div>
                </div>
                <div class="table-wrap0">
                    <div :style="{animation: (platform_box_prize.length <= 5) ? 'none' : 'autoScroll ' + ((platform_box_prize.length / 10) * 30) +'s linear infinite'}">
                        <div class="table">
                            <div class="table-tr" style="font-size: 0.7rem;" v-for="item in platform_box_prize">
                                <div class="table-td" style="width: 60px;">
                                    <div class="head-img"><img :src="item.avatar_url" class="img-in"></div>
                                </div>
                                <div class="table-td" style="width: 60px;">{{item.nickname}}</div>
                                <div class="table-td" style="width: 100px;">{{item.name}}</div>
                                <div class="table-td" style="width: 80px;">{{item.phone}}</div>
                                <div class="table-td" style="width: 150px;">{{item.prize_name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <img class="footer-bg" src="/static/dashboard/image/board-footer-bg.png">
        </div>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                code: "",
                data: {
                    activity_title: '',
                    countdown: '',
                    transaction_amount: '',
                    total_visitor_num: '',
                    total_join_num: '',
                    total_activity_prize: '',
                    total_box_prize: '',
                    payment_user_num: '',
                    participate_num: '',
                    payment_money_num: '',
                    total_disburse: '',
                },
                payment_order: [],
                participate_order: [],
                staff_rankings: [],
                platform_box_prize: [],
                countdown_status: false,
                count_down_day:"00",
                count_down_hour:"00",
                count_down_minute:"00",
                count_down_second:"00",
            };
        },
        created() {
            var that = this;
            options = getUrlParams();
            if (options.code) {
                this.code = options.code;
                this.getInfo();
                setInterval(function () {
                    that.getInfo();
                }, 1000 * 60);
            } else {
                this.$message.error("大屏地址不正确，请从后台重新获取大屏地址");
            }
        },
        methods: {
            // 倒计时
			countdown: function(endTime) {
				var that = this;
                this.countdown_status = true;
				var totalSecond = endTime - Date.parse(new Date())/1000;
				var interval = setInterval(function () {
					// 秒数
					var second = totalSecond;
					// 天数位
					var day = Math.floor(second / 3600 / 24);
					var dayStr = day.toString();
					if (dayStr.length == 1) dayStr = '0' + dayStr;
					// 小时位
					var hr = Math.floor((second - day * 3600 * 24) / 3600);
					var hrStr = hr.toString();
					if (hrStr.length == 1) hrStr = '0' + hrStr;
					// 分钟位
					var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
					var minStr = min.toString();
					if (minStr.length == 1) minStr = '0' + minStr;
					// 秒位
					var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
					var secStr = sec.toString();
					if (secStr.length == 1) secStr = '0' + secStr;
					that.count_down_day = dayStr;
					that.count_down_hour = hrStr;
					that.count_down_minute = minStr;
					that.count_down_second = secStr;
	
					totalSecond--;
					if (totalSecond < 0) {
						clearInterval(interval);
						that.count_down_day = '00';
						that.count_down_hour = '00';
						that.count_down_minute = '00';
						that.count_down_second = '00';
					}
				}.bind(that), 1000);
			},
            getInfo() {
                var that = this;
                $.get("/api/dashboard/info", {
                    code: this.code
                }, function(result) {
                    // 获取活动数据
                    that.data = result.data.data;
                    that.payment_order = result.data.payment_order;
                    that.participate_order = result.data.participate_order;
                    that.staff_rankings = result.data.staff_rankings;
                    that.platform_box_prize = result.data.platform_box_prize;

                    // 倒计时
                    if (that.countdown_status === false) {
                        that.countdown(that.data.countdown);
                    }
                });
            },
        },
    };
    Vue.createApp(App).use(DyPlugin).use(SeamlessScroll).mount("#app");

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    var app = {};

    var option;

    // 获取折线图数据
    function getLineChartData()
    {
        var code = getUrlParams().code;
        $.get("/api/dashboard/getLine", {
            code: code
        }, function(result) {
            if (result.code === 200) {
                var data = result.data;
                option = {
                    title: {
                        text: "今日数据趋势",
                        left: "left",
                        textStyle: {
                            color: "#55F4F4",
                        },
                    },
                    textStyle: {
                        color: "#FFFFFF",
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {color: '#FFFFFF'},
                        data: ['曝光次数', '获客总数', '报名人数', '成交人数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.hours
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '曝光次数',
                            type: 'line',
                            stack: 'Total',
                            data: data.visitor_data
                        },
                        {
                            name: '获客总数',
                            type: 'line',
                            stack: 'Total',
                            data: data.join_data
                        },
                        {
                            name: '报名人数',
                            type: 'line',
                            stack: 'Total',
                            data: data.participate_data
                        },
                        {
                            name: '成交人数',
                            type: 'line',
                            stack: 'Total',
                            data: data.payment_data
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            } else {
                console.error('获取折线图数据失败:', result.msg);
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error('请求失败:', textStatus, errorThrown);
        });
    }

    // 初始化折线图
    getLineChartData();

    // 定时刷新折线图数据
    setInterval(function() {
        getLineChartData();
    }, 60000); // 每分钟刷新一次

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>